import React, { ReactElement ,useEffect,useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Table, Switch, Space,Button ,message,Spin, Alert} from 'antd';
import {SettingOutlined} from '@ant-design/icons';
//引入搜索模块
import SearchServeType from "../../components/hangComponents/searchServeType";
//引入新增模块
import AddServeType from "../../components/hangComponents/addServeType";
//引入修改模块
import ChangeServeType from '../../components/hangComponents/changeServeType'

export default function Category(){
const dispatch = useDispatch()





const columns = [
  {
    title: '名称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '操作',
    dataIndex: '',
    key: 'x',
    render: (value) => <SettingOutlined onClick={()=>chan(value)} style={{color:"#36a3ff",fontSize:"20px"}}/>,
  },
];

const change = (val) => {
  console.log(val);
}
//获取所有服务类别
const getAllType = () =>{
  dispatch({
    type:"getServeType",
});
}

const [isLoading,setLoading]= useState(false)

useEffect(() => {
  console.log(addOK);
  getAllType()
}, []);
const {serveType,addOK,changeOK,delOK} = useSelector(state => state.hangRC)


//新增服务类型
const addOneType = (data) => {
  dispatch({
    type:"addType",
    payload:data
});
}
useEffect(() => {
  console.log(addOK);
  if(addOK === null){
  }else{
    if(addOK === 200){
      message.success("添加成功");
      getAllType()
      setVisible(false)
    }else{
      message.error("添加失败")
    }
  }
}, [addOK]);




//修改服务类型
const changeOneType = (data) => {
  console.log(data);
  dispatch({
    type:"changeType",
    payload:data
});
}

useEffect(() => {
  console.log(changeOK);
  if(changeOK === null){
  }else{
    if(changeOK === 200){
      message.success("修改成功");
      getAllType()
      setVisible2(false)
    }else{
      message.error("修改失败")
    }
  }
}, [changeOK]);

useEffect(() => {
  setLoading(false)
  
}, [serveType]);



//删除功能
const [delID, setDelID] = useState()
useEffect(() => {
  console.log(delID);
}, [delID])
const delSome = () =>{
  setLoading(true)

  dispatch({
    type:"delSomeServeType",
    payload:delID.join(',')
  })
}
useEffect(() => {
  console.log(delOK);
  if(delOK === null){
  }else{
    if(delOK === 200){
      message.success("删除成功");
      getAllType()
    }else{
      message.error("删除失败")
    }
  }
  setLoading(false)
}, [delOK]);
const rowSelection = {
    onChange: (selectedRowKeys , selectedRows) => {
      setDelID(selectedRowKeys);
      
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    onSelect: (record, selected, selectedRows) => {
      console.log(record, selected, selectedRows);
    },
    onSelectAll: (selected, selectedRows, changeRows) => {
      console.log(selected, selectedRows, changeRows);
    },
};

const [size, setSize] = useState();
const showLargeDrawer = () => {
          setSize('large');
          setVisible(true);
};
const [visible, setVisible] = useState(false);
const [checkStrictly, setCheckStrictly] = React.useState(true);

//点击修改
const [changeValue,setChangeValue] = useState({})
const chan = (value) => {
  setSize('large');
  setChangeValue(value);
  setVisible2(true)
}


const [visible2, setVisible2] = useState(false);

    return (
        <>
        <SearchServeType SetLoading={setLoading}></SearchServeType>
          <Space style={{marginBottom:"10px"}}>
          <Button type="primary" ghost onClick={showLargeDrawer}>
            新增
          </Button>
          <Button onClick={delSome}>
            删除
          </Button>
        </Space>
        <AddServeType
        size={size}
        visible={visible}
        setVisible={setVisible}
        serveType={serveType}
        addOneType={addOneType}
        ></AddServeType>
        <ChangeServeType
        size={size}
        visible={visible2}
        setVisible={setVisible2}
        serveType={serveType}
        changeType={changeValue}
        changeOneType={changeOneType}
        >
        </ChangeServeType>
         <Spin tip="Loading..." spinning={isLoading}>
        <Table
          columns={columns}
          rowSelection={{ ...rowSelection, checkStrictly }}
          dataSource={serveType}
          pagination={false}
        />
         </Spin>
      </>
    )
}
